<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全选功能</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      /* 简单的样式 */
      fieldset {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div id="all" style="font-size: 20px">
      总全选：
      <input type="checkbox" id="selectAll" />
    </div>
    <br />
    <fieldset>
      <legend>吃货清单</legend>
      全选：
      <input id="eatAll" type="checkbox" />
      <h3 style="color: rgb(197, 86, 86)">水果</h3>
      <label for="">全选</label>
      <input id="fruitAll" type="checkbox" class="fruit" />
      <label for="">香蕉</label>
      <input type="checkbox" class="fruit" />
      <label for="">苹果</label>
      <input type="checkbox" class="fruit" />
      <label for="">橘子</label>
      <input type="checkbox" class="fruit" />
      <h3 style="color: rgb(94, 133, 59)">蔬菜</h3>
      <label for="">全选</label>
      <input id="caiAll" type="checkbox" class="vegetable" />
      <label for="">番茄</label>
      <input type="checkbox" class="vegetable" />
      <label for="">土豆</label>
      <input type="checkbox" class="vegetable" />
      <label for="">西兰花</label>
      <input type="checkbox" class="vegetable" />
    </fieldset>

    <fieldset>
      <legend>明星清单</legend>
      全选：
      <input id="starAll" type="checkbox" />
      <h3 style="color: rgb(86, 121, 197)">演员</h3>
      <label for="">全选</label>
      <input id="yanAll" type="checkbox" class="actor" />
      <label for="">张颂文</label>
      <input type="checkbox" class="actor" />
      <label for="">黄轩</label>
      <input type="checkbox" class="actor" />
      <label for="">张译</label>
      <input type="checkbox" class="actor" />
    </fieldset>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
      $(document).ready(function () {
        // 总全选
        $("#selectAll").on("change", function () {
          $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));
        });

        // 吃货清单全选
        $("#eatAll").on("change", function () {
          $(".fruit, .vegetable").prop("checked", $(this).prop("checked"));
        });

        // 水果全选
        $("#fruitAll").on("change", function () {
          $(".fruit").prop("checked", $(this).prop("checked"));
        });
        // 蔬菜全选
        $("#caiAll").on("change", function () {
          $(".vegetable").prop("checked", $(this).prop("checked"));
        });

        // 明星清单全选
        $("#starAll").on("change", function () {
          $(".actor").prop("checked", $(this).prop("checked"));
        });

        // 演员全选
        $("#yanAll").on("change", function () {
          $(".actor").prop("checked", $(this).prop("checked"));
          // $(".actor").prop("checked", $(this).prev("input").prop("checked"));
        });
      });
    </script>
  </body>
</html>
